<template>
  <div :class="['miva-loading',isShow?'open':'close']">
    <div :class="['bg-open',isShow?'open':'close']" />
    <!-- <img :class="['loading-image',isShow?'open':'close']" src="@/assets/img-lazy.gif" > -->
    <!-- <img :class="['loading-image',isShow?'open':'close']" src="@/assets/header_btn.gif" > -->
    <img :class="['loading-image',isShow?'open':'close']" src="@/assets/icon3.png" />
  </div>
</template>

<script>
export default {
    data() {
        return {
            isShow: false,
        };
    },
};
</script>

<style lang="less" scoped>
// 开启
// 背景  .3s ease-in - 总时间 .3s
// 猫咪.2s等待 .2s - 总时间 .4s
// 关闭
// 背景 .6s ease-in - 总时间 .6s
// 猫咪.2s等待 .1s - 总时间 .3s
// 背景层级等待
// 开始 .4s
// 结束 .6s
.miva-loading {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  &.open {
    z-index: 748943649 * 2;
    animation: loadingOpen 0.00001s 0.4s forwards;
  }
  &.close {
    z-index: 748943649 * 2;
    animation: loadingClose 0.00001s 0.6s forwards;
  }
  // 背景
  .bg-open {
    width: 200vw;
    height: 200vw;
    min-width: 200vh;
    min-height: 200vh;
    position: fixed;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) scale(1);
    user-select: none;
    // background-color: #66ceff;
    background-color: @base_color;
    &.open {
      animation: bgOpen 0.3s ease-in forwards;
    }
    &.close {
      animation: bgClose 0.6s ease-in forwards;
    }
  }
  // 猫咪
  .loading-image {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    user-select: none;
    pointer-events: none;
    &.open {
      animation: catOpen 0.2s 0.2s ease-in forwards;
    }
    &.close {
      transform: translate(-50%, -50%) scale(1);
      animation: catClose 0.2s 0.2s ease-in forwards;
    }
  }

  @keyframes bgOpen {
    0% {
      display: block;
      transform: translate(-50%, -50%) scale(0);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
  }
  @keyframes bgClose {
    0% {
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      display: none;
      transform: translate(-50%, -50%) scale(0);
    }
  }
  @keyframes catOpen {
    0% {
      display: block;
      transform: translate(-50%, -50%) scale(0);
    }
    90% {
      transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
  }
  @keyframes catClose {
    0% {
      transform: translate(-50%, -50%) scale(1);
    }
    10% {
      transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
      display: none;
      transform: translate(-50%, -50%) scale(0);
    }
  }
  @keyframes loadingOpen {
    to {
      // background-color: #66ceff;
      background-color: @base_color;
    }
  }
  @keyframes loadingClose {
    to {
      z-index: -1;
      background-color: transparent;
    }
  }
}
</style>
